<template>
  <div class="dashboard">
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="6" v-for="card in cards" :key="card.title">
        <el-card class="dashboard-card">
          <div class="card-icon" :style="{ background: card.bg, color: card.color }">
            <el-icon :size="32"><component :is="card.icon" /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-title">{{ card.title }}</div>
            <div class="card-value">{{ card.value }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="dashboard-chart">
      <div class="chart-header">
        <span>访问趋势</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          style="margin-left: 16px;"
          @change="fetchChartData"
        />
      </div>
      <div ref="chartRef" style="width:100%;height:320px;"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { User as IepUser, Message as IepMessage, Money as IepMoney, ShoppingCart as IepShoppingCart } from '@element-plus/icons-vue'

const cards = ref([
  {
    title: '新访问（首页示例）',
    value: 102400,
    icon: IepUser,
    bg: '#e3f2fd',
    color: '#409eff'
  },
  {
    title: '消息',
    value: 81212,
    icon: IepMessage,
    bg: '#f3e5f5',
    color: '#67c23a'
  },
  {
    title: '订单',
    value: 9280,
    icon: IepMoney,
    bg: '#fff3e0',
    color: '#f56c6c'
  },
  {
    title: '购物',
    value: 13600,
    icon: IepShoppingCart,
    bg: '#e0f7fa',
    color: '#e6a23c'
  }
])

const chartRef = ref(null)
const dateRange = ref([])
const chartData = ref({
  x: [],
  expected: [],
  actual: []
})

function randomData(len = 7, base = 1000) {
  return Array.from({ length: len }, () => Math.round(base + Math.random() * 500))
}

function fetchChartData() {
  // 模拟异步获取数据
  const days = dateRange.value.length === 2
    ? Math.max(1, Math.ceil((dateRange.value[1] - dateRange.value[0]) / 86400000) + 1)
    : 7
  chartData.value.x = Array.from({ length: days }, (_, i) => `Day${i + 1}`)
  chartData.value.expected = randomData(days, 1200)
  chartData.value.actual = randomData(days, 1000)
  renderChart()
}

let chartInstance = null
function renderChart() {
  if (!chartRef.value) return
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value)
  }
  chartInstance.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['expected', 'actual'] },
    grid: { left: 30, right: 20, top: 40, bottom: 30 },
    xAxis: { type: 'category', data: chartData.value.x },
    yAxis: { type: 'value' },
    series: [
      {
        name: 'expected',
        type: 'line',
        smooth: true,
        data: chartData.value.expected,
        lineStyle: { color: '#f56c6c' }
      },
      {
        name: 'actual',
        type: 'line',
        smooth: true,
        data: chartData.value.actual,
        lineStyle: { color: '#409eff' }
      }
    ]
  })
}

onMounted(() => {
  fetchChartData()
  window.addEventListener('resize', () => chartInstance && chartInstance.resize())
})

watch(dateRange, fetchChartData)
</script>

<style scoped>
.dashboard {
  padding: 16px;
}
.dashboard-cards {
  margin-bottom: 24px;
}
.dashboard-card {
  display: flex;
  align-items: center;
  min-width: 180px;
  border-radius: 8px;
  padding: 0 16px;
}
.card-icon {
  font-size: 36px;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.card-content {
  flex: 1;
}
.card-title {
  font-size: 14px;
  color: #888;
}
.card-value {
  font-size: 22px;
  font-weight: bold;
  margin-top: 4px;
}
.dashboard-chart {
  margin-top: 12px;
  padding: 16px;
  border-radius: 8px;
}
.chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: bold;
  gap: 12px;
}
</style>
